<template>
	<view class="evaluate">
		<view class="evaluate_header">
			<text>评价</text>
			<u-rate :count="5" v-model="fromValue.evaluateScore" active-color="#FF943C"></u-rate>
		</view>
		<u-textarea maxlength="100" count placeholder="请输入评价内容" border="none"
			v-model="fromValue.evaluateContent"></u-textarea>
		<view class="evaluate_upload">
			<template v-if="fromValue.evaluatePhotos">
				<view v-for="(item,index) in fromValue.evaluatePhotos" :key="index" @click.stop="handlePreview(index)">
					<text @click.stop="handleDelImg(index)">×</text>
					<image :src="item"></image>
				</view>
			</template>
			<view v-if="fromValue.evaluatePhotos?.length <= 5" @click="handleUpload">
				<image src="http://qianxueapplet.suoeryun.com/addimage.png">
				</image>
			</view>
		</view>
		<view class="evaluate_btn">
			<button @click="handleSave">提价评价</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, unref, getCurrentInstance } from 'vue';
	import config from '@/common/config';
	import { onLoad } from '@dcloudio/uni-app';
	import { qxGoodsEvaluateAdd } from '@/config/goodStuff.api';

	const { proxy } = getCurrentInstance();
	const fromValue = reactive({
		"avatar": "",
		"evaluateContent": "",
		"evaluateLevel": "",
		"evaluatePhotos": [],
		"evaluateScore": 0,
		"evaluateUserId": "",
		"evaluateUserNickname": "",
		"fromToday": "",
		"goodsId": "",
		"goodsName": "",
		"id": "",
		"orderId": "",
		"telephone": "",
	})

	onLoad((options) => {
		fromValue.orderId = options?.orderId;
		fromValue.goodsId = options?.goodsId;
		fromValue.goodsName = options?.goodsName;
	})

	/**
	 * 上传图片
	 */
	function handleUpload() {
		uni.chooseImage({
			count: 5 - fromValue.evaluatePhotos?.length,
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				console.log(tempFilePaths, 'tempFilePaths');
				uni.showLoading({
					title: '上传中'
				})
				let count = 0;
				tempFilePaths?.forEach(item => {
					uni.uploadFile({
						url: config.baseUrl + '/sys/common/obsUpload', //仅为示例，非真实的接口地址
						filePath: item,
						name: 'file',
						header: {
							'X-Access-Token': unref(proxy['vuex_token'])
						},
						success: (uploadFileRes) => {
							uni.hideLoading();
							count += 1;
							fromValue.evaluatePhotos.push(JSON.parse(uploadFileRes.data)?.message);
						},
						fail() {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '接口异常！'
							})
						}
					});
				})
				setTimeout(_ => {
					if (count === tempFilePaths?.length) {
						uni.hideLoading();
					}
				}, 1000)
			},
			fail() {
				uni.hideLoading();
			}
		});
	}

	/**
	 * 提交评价
	 */
	async function handleSave() {
		if (fromValue.evaluateScore === 0) {
			return uni.showToast({
				icon: 'none',
				title: '请评分'
			})
		}
		const res = await qxGoodsEvaluateAdd({ ...fromValue, evaluatePhotos: fromValue.evaluatePhotos?.join(',') });
		uni.showToast({
			icon: 'success',
			title: '提交成功',
			success() {
				uni.navigateBack({
					success() {
						uni.$emit('orderDetails')
					}
				})
			}
		})
	}

	/**
	 * 图片预览
	 */
	function handlePreview(index) {
		uni.previewImage({
			current: index,
			urls: fromValue.evaluatePhotos,
		})
	}

	/**
	 * 删除图片
	 */
	function handleDelImg(index) {
		fromValue.evaluatePhotos?.splice(index, 1);
	}
</script>

<style lang="scss" scoped>
	.evaluate {
		background-color: #fff;
		margin-top: 24rpx;
		padding: 24rpx;
		height: calc(100vh - 24rpx - 24rpx - 24rpx);

		.evaluate_header {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			padding-bottom: 24rpx;

			text {
				margin-right: 30rpx;
			}
		}

		::v-deep .u-textarea {
			background-color: #F6F6F6 !important;
			font-size: 28rpx !important;
			border-radius: 20rpx !important;
			padding: 24rpx !important;
			height: 388rpx !important;

			.u-textarea__count {
				color: #B8B8B8;
				font-size: 28rpx;
				padding-bottom: 35rpx;
				background-color: #F6F6F6 !important;
			}
		}

		.evaluate_upload {
			margin-top: 24rpx;
			margin-bottom: -24rpx;
			margin-bottom: -24rpx;

			&>view {
				position: relative;
				width: 126rpx;
				height: 126rpx;
				display: inline-block;
				margin-right: 24rpx;

				text {
					position: absolute;
					top: 5rpx;
					right: 2rpx;
					padding: 4rpx 10rpx;
					font-size: 30rpx;
					background-color: rgba(0, 0, 0, 0.4);
					color: #fff;
					border-radius: 50%;
				}

				image {
					width: 126rpx;
					height: 126rpx;
					margin-bottom: 24rpx;
					border-radius: 12rpx;
				}
			}

			image {
				width: 126rpx;
				height: 126rpx;
				margin-bottom: 24rpx;
				border-radius: 12rpx;
			}
		}

		.evaluate_btn {
			margin-top: 134rpx;

			button {
				margin: 0;
				padding: 0;
				width: 456rpx;
				height: 70rpx;
				line-height: 68rpx;
				background-color: #FF943C;
				margin: 0 auto;
				color: #fff;
				border-radius: 776rpx;
				font-size: 30rpx;

				&::after {
					border: 0;
				}
			}
		}
	}
</style>